<template>
    <CommonDialog :visible="visible" width="488px" @on-close="cancel" :title="formData.catalogueId ? '编辑目录' : '添加目录'">
        <el-form ref="editRef" :model="formData" :rules="formRule" :label-width="80" class="catalogue-form">
            <el-form-item label="目录名称" prop="contentTitle" class="srt-el-input-item">
                <el-input show-word-limit maxlength="30" type="text" v-model="formData.contentTitle" @keyup.enter="confirm"
                    class="srt-el-input" placeholder="请输入目录名称，最多30个字" style="width: 915px;">
                </el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button class="srt-el-button srt-el-button--cancel srt-el-button-h36" @click="cancel">取消</el-button>
            <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36" @click="confirm">确定</el-button>
        </div>
    </CommonDialog>
</template>

<script setup>
import CommonDialog from '@/components/common-dialog.vue'
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { queryToJson } from '@/lib/tools.js'

const store = useStore();

const route = useRoute();

const emit = defineEmits(['update:modelValue', 'update-folder']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});


const formRule = ref({
    contentTitle: [
        {
            required: true,
            validator: (rule, value, callback) => {
                let temp = value && value.trim() || '';
                if (temp.length > 30 || temp.length < 2) {
                    callback('请输入2-30个字的目录名称');
                }else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ]
});

const visible = computed({
    get: () => props.modelValue,
    set: val => {
        emit('update:modelValue', val);
    }
})

const formData = ref({
    contentTitle: '',
    pid: 0
})

watch(() => props.modelValue, (val) => {
    if (val) {
        formData.value = Object.assign({}, formData.value, props.form, {contentTitle: props.form.catalogueName});
    } else {
        formData.value = {
            pid: 0
        };
        editRef.value && editRef.value.resetFields();
    }
})




function cancel () {
    emit('update:modelValue', false);
}

const editRef = ref(null);

// 提交保存
function confirm () {
    editRef.value.validate((valid) => {
        if (!valid) {
            // G_dispatchEvent('toast', { message: '请检查必填信息', type: 'error' })
            return;
        }
        confirmSave();
    })
}

function confirmSave () {
    let params1 = {
        contentTitle: formData.value.contentTitle,
        id: formData.value.catalogueId
    }
    let params2 = {
        ...formData.value,
    }
    let params = formData.value.catalogueId ? params1 : params2;
    let portalName = formData.value.catalogueId ? 'folderRename' : 'folderAdd';
    let courseId = queryToJson().courseId || route.params.courseId;
    G_transmit(portalName, {
        data: {
            ...params,
            courseId: courseId,
        }
    }).then((res) => {
        let temp = Object.assign({}, formData.value, {catalogueId: res.data || props.form.catalogueId, catalogueName: formData.value.contentTitle, catalogueType: 0});
        let type = props.form.catalogueId ? 'update' : 'append';
        let key = props.form.catalogueId || temp.pid;
        let tip = formData.value.catalogueId ? '编辑成功' : '添加成功';
        G_dispatchEvent('toast', { message: tip, type: 'success' })
        emit('update-folder', type, key, temp);
        cancel();
    }).catch((_err) => {
        console.log(_err)
    })
}

</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;

}
.catalogue-form {
    :deep(.el-form-item__label) {
        line-height: 40px;
        height: 40px;
        color: var(--srt-color-gray);
        margin-right: 8px;
    }
}
</style>